<template>
    <div class="tab_bar_item" v-on:click="clickItem">
        <!--<div v-if="!isActive"><slot name="item-icon"></slot></div>
        <div v-else="!isActive"><slot name="item-icon-active"></slot></div>
        <div v-bind:class="{text_active:isActive}"><slot name="item-text"></slot></div>-->
        <div v-if="!isActive"><img v-bind:src=img_path></div>
        <div v-else="!isActive"><img v-bind:src="img_active_path"></div>
        <div v-bind:class="{text_active:isActive}">{{text}}</div>
    </div>
</template>

<script>
    export default {
        name: "TabBarItem",
        props:{
            _path:String,
            img_path:String,
            img_active_path:String,
            text:String
        },
        data(){
            return{
                //active:true
            }
        },
        computed:{
            isActive(){
                const ret=this.$route.path.indexOf(this._path)!==-1;
                console.log(this.$route);
                //console.log("route_path= "+this.$route);
                return ret;
            }
        },
        methods:{
            clickItem(){
                this.$router.replace(this._path).catch(error=>console.log(error));
                //this.active=!this.active;
            }
        }
    }
</script>

<style scoped>
    .tab_bar_item{
        flex :1;
        text-align :center;
        height :49px;
        margin-top: 3px;
    }
    .tab_bar_item img{
        height: 24px;
        width: 30px;
    }
    .text_active{
        color: red;
    }
</style>